<style>
    .account-stat-num{display: flex;align-items: center;flex-wrap: wrap;}
	.account-stat-num > div{font-size:16px; text-align:center;}
	.account-stat-num > div span{display:block; font-size:30px; font-weight:bold;}
	.control-label{text-align: right;}
</style>
<div class="container-fluid">
    <div class="row" style="min-width: 800px;">
        <div class="col-lg-12">
        	<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
    	        <li class="nav-item" role="presentation">
    	          <a href='/SPAdmin/order' class="nav-link @if(!$op)active @endif">全部订单</a>
    	        </li>
    	        <li class="nav-item" role="presentation">
    	          <a href='/SPAdmin/order?op=reset' class="nav-link @if($op == 'reset')active @endif">挂起订单({{$resetnum}})</a>
    	        </li>
	        </ul>
            <div class="card" style="margin-top: 10px;">
                <div class="card-header bg-primary text-white">筛选</div>
                <div class="card-body">
                    <div action="" method="get" class="row g-3 form-horizontal" role="form">
                        <div class="form-group">
                            <div class="row">
                            	<input id="op" type="hidden" value='{{$op}}'>
                                <label class="col-md-1 control-label">订单号</label>
                                <div class="col-md-2">
                                    <input class="form-control" id="orderno" value='{{$orderno}}' placeholder="请输入订单编号">
                                </div>
                                 <label class="col-md-1 control-label">支付流水号</label>
                                <div class="col-md-2">
                                    <input class="form-control" id="transid" placeholder="请输入支付流水号">
                                </div>
                                <label class="col-md-1 control-label">商品</label>
                                <div class="col-md-2">
                                    <select class='form-control selectpicker' id='good' title='请选择商品' data-live-search='true'>
                                    	<option value='0'>全部商品</option>
                                    	<option value='fee0'>话费</option>
                                    	<option value='fee1'>电费</option>
                                    	<option value='fee2'>燃气</option>
                                    	@foreach($goods as $n)
                                        <option value='{{$n["id"]}}'>{{$n['title']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                         <div class="form-group">
                            <div class="row">
                            	<label class="col-md-1 control-label">充值信息</label>
                                <div class="col-md-2">
                                    <input class="form-control" id="nums" placeholder="请输入充值信息">
                                </div>
                            	<label class="col-md-1 control-label">订单状态</label>
                                <div class="col-md-2">
                                    <select class='form-control' id='status'>
                                    	<option value='0'>全部订单</option>
                                    	<option value='1'>充值中</option>
                                    	<option value='2'>已完成</option>
                                    	<option value='3'>订单失败</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-default" onclick="onSearch()"><i class="fa fa-search"></i> 搜索</button>
                                    <button class="btn btn-primary" onclick="onExport()">导出</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div> 

<style>
.control-label {
    padding-top: 7px;
}
.datepicker>div{
    display: block !important;
}
</style>

<script>

var columns = [
{
    field: 'ordersn',
    title: "订单号",
    formatter: function(value,item){
    	var html = item.ordersn;
		return html;
    }
},{
    field: 'good',
    title: '商品信息',
    formatter: function(value,item){
    	var html = '';
		if(item.logo) html = "<img src='"+item.logo+"' width='40px'><br>";
		html += item.title;
		return html;
    }
}, {
    field: 'nums',
    title: '充值信息',
    width:'100px'
},{
    field: 'price',
    title: '下单金额',
},{
    field: 'channel',
    title: '渠道信息'
},{
    field: 'status',
    title: '订单状态',
    formatter: function(value,item){
    	if (item.status == 0){
            return '<span class="status-btn badge bg-secondary">未支付</span>';
    	}else if (item.reset == 1) {
            return '<span class="status-btn badge bg-info">待提交</span>'+(item.reason ? ('<br>原因：'+item.reason) : '');
        }else if (item.status == 1) {
            return '<span class="status-btn badge bg-warning">充值中</span>';
        } else if (item.status == 2) {
            return '<span class="status-btn badge bg-success">已完成</span>';
        } else if (item.status == -1) {
            if(item.refundid) return '<span class="status-btn badge bg-danger">已退款</span>'+(item.reason ? ('<br>原因：'+item.reason) : '');
            else return '<span class="status-btn badge bg-brown">退款异常</span><br><a class="btn btn-danger btn-sm">退款</a>';
        }
    },
    events: {
    	'click .btn-danger': function (event, value, row, index) {
            event.stopPropagation();
            $.confirm({
                title: '温馨提示',
                content: '确定退款吗？',
                buttons: {
                    formSubmit: {
                        text: '确认',
                        btnClass: 'btn-danger',
                        action: function () {
                            showLoading();
                            $.ajax({
                                url:'/SPAdmin/order/refund',
                                type:'post',
                                data: {oid: row.id},
                                dataType:'json',
                                success:function(res){
                                    hideLoading();
                                    if(res.code == 0) return $.alert(res.msg);
                                    showNotify('操作成功', 'success', 2000, 'mdi mdi-emoticon-happy', 'top', 'center');
                                    $('#table').bootstrapTable('refresh')
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消'
                    },
                }
            });
        },
    }
}, {
    field: 'rebackinfo',
    title: '佣金信息',
}, {
    field: 'time',
    title: '订单时间',
},{
    field: 'operate',
    title: '操作',
    formatter: function(value,item){ // 自定义方法
        var html = "<div class='btn-group'>";
// 		if (item.status != 1) html += '<a class="btn btn-sm btn-warning rebackbtn">触发回调</a>';
// 		else 
		if (item.status == 1){
			if(item.reset == 1) html += '<a class="btn btn-sm btn-info resetbtn">提交渠道</a>';
			else html += '<a class="btn btn-sm btn-primary succbtn">订单完成</a>';
			html += '<a class="btn btn-sm btn-danger refundbtn">订单失败</a>';
		}
		html += '</div>';
        return html;
    }, 
    events: {
    	'click .resetbtn': function (event, value, row, index) {
            event.stopPropagation();
            $.confirm({
                title: '温馨提示',
                content: '确定提交订单到渠道吗？',
                buttons: {
                    formSubmit: {
                        text: '提交',
                        btnClass: 'btn-blue',
                        action: function () {
                            showLoading();
                            $.ajax({
                                url:'/SPAdmin/order/resubmit',
                                type:'post',
                                data: {oid: row.id},
                                dataType:'json',
                                success:function(res){
                                    hideLoading();
                                    if(res.code == 0) return $.alert(res.msg);
                                    showNotify('提交成功', 'success', 2000, 'mdi mdi-emoticon-happy', 'top', 'center');
                                    $('#table').bootstrapTable('refresh')
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消'
                    },
                }
            });
        },
        'click .refundbtn': function (event, value, row, index) {
            event.stopPropagation();
            var str = "";
            str += '<div class="input-group" style="margin-bottom: 5px;">' +
            '<div class="input-group-text">退款金额</div><input type="text" readonly name="refundMoney" placeholder="请输入退款金额" value="'+row.price+'" id="refundMoney" class="form-control"></div>' +
            '</div>';
            str += '<div class="input-group">' +
                '<div class="input-group-text">退款原因</div><input type="text" name="refundMoney" placeholder="请输入退款原因" id="refundReason" class="form-control"></div>' +
            '</div>';
            $.confirm({
                title: '订单退款',
                content: str,
                buttons: {
                    formSubmit: {
                        text: '提交',
                        btnClass: 'btn-blue',
                        action: function () {
                            var refundMoney = this.$content.find('#refundMoney').val();
                            if(!refundMoney){
                                $.alert('请输入退款金额');
                                return false;
                            }
                            showLoading();
                            $.ajax({
                                url:'/SPAdmin/order/refund',
                                type:'post',
                                data: {oid: row.id, price: refundMoney,reason: this.$content.find('#refundReason').val(),reback: this.$content.find('#orderreback').val()},
                                dataType:'json',
                                success:function(res){
                                    hideLoading();
                                    if(res.code == 0) return $.alert(res.msg);
                                    showNotify('操作成功', 'success', 2000, 'mdi mdi-emoticon-happy', 'top', 'center');
                                    $('#table').bootstrapTable('refresh')
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消'
                    },
                }
            });
        },
    }
}
];
$('#table').bootstrapTable({
    url: '/SPAdmin/order',
    dataType: 'json',
	method: 'post',
    pagination: true,//开启分页
    pageSize:30,
    pageNumber:1,
    sidePagination:'server',
    search: false, //开启刷选
    columns: columns,
    queryParams:function(params) {
        /******获取分页数据时，这里你可以带上你自定义的参数,bootstrap table会把这些参数合并到请求里******/
        params.op = $('#op').val();
        params.orderno = $('#orderno').val();
        params.nums = $('#nums').val();
        params.status = $('#status').val();
        params.gid = $('#good').val();
        params.transid = $('#transid').val();
        params.startTime = $('#startTime').val();
        params.endTime = $('#endTime').val();
        return params;
	},
});
/* 搜索按钮 */
function onSearch(){
	$('#table').bootstrapTable('refresh');
}

function onExport(){
	location.href = "/Admin/order/export?orderno="+$('#orderno').val()+"&nid="+$('#network').val()+"&did="+$('#device').val()+"&startTime="+$('#startTime').val()+"&endTime="+$('#endTime').val();
}
</script>